import React, { Component } from 'react'
import axios from 'axios'

import PubSub from 'pubsub-js'
export default class Search extends Component {


  search = async () => {
    PubSub.publish('updateStateToLoading', { isFirst: false, isLoading: true })
    //连续的结构赋值 +重命名 
    const { keyWordElement: { value: keyword } } = this
    // 发送网络请求 
    // axios.get(`http://localhost:3000/api1/search/users?q=${keyword}`).then(
    //   response=>{
    //     PubSub.publish('updateStateToLoading',{isLoading:false,users:response.data.items})
    //     console.log('成功了',response.data)
    //   },
    //   error=>{
    //     console.log('失败了',error)
    //     PubSub.publish('updateStateToLoading',{isLoading:false,err:error.message})
    //   }
    // )

    // 发送网络请求  ---使用fetch 发送(未优化)
    // fetch(`/api1/search/users?q=${keyword}`).then(
    //   response=>{
    //     console.log('联系服务器成功了...')
    //     return response.json()
    //   },
    //   error=>{
    //     console.log('联系服务器失败了',error)
    //     return new Promise(()=>{})
    //   }
    // ).then(
    //   response=>{
    //     PubSub.publish('updateStateToLoading',{isLoading:false,users:response.items})
    //     console.log('获取数据成功了',response)
    //   },
    //   error=>{
    //     PubSub.publish('updateStateToLoading',{isLoading:false,err:error.message})
    //     console.log('获取数据失败了',error)
    //   }
    // )
    //  发生网络请求, 使用fetch发送(优化)
    try {
      const response = await fetch(`/api1/search/users2?q=${keyword}`)
      const data = await response.json()
      console.log(data)
      PubSub.publish('updateStateToLoading',{isLoading:false,users:data.items})
    } catch (error) {
      PubSub.publish('updateStateToLoading',{isLoading:false,err:error.message})
    }


  }
  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">搜索github用户</h3>
        <div>
          <input ref={c => this.keyWordElement = c} type="text" placeholder="输入关键词点击搜索" />&nbsp;
          <button onClick={this.search}>搜索</button>
        </div>
      </section>
    )
  }
}
